<template>
    <view class="tabbar">
        <view
            class="tabbar-box"
            @mouseover="onBarMouseOver"
            @mouseout="onBarMoueOut"
        >
            <view class="tabbar-top">
                <view class="logo-img">
                    <image
                        :src="headImgUrl"
                        mode="aspectFill"
                        @error="onImgError"
                    ></image>
                </view>
                <div class="box-type comm-list" id="box-type-box">
                    <!-- begin  -->
                    <!-- 会员 -->
                    <view
                        class="item"
                        v-for="(item, index) in vipList"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                        <view
                            class="type-txt"
                            :class="{ 'type-txt-s': tabIndex == item.id }"
                            >{{ item.title }}</view
                        >
                    </view>
                    <!-- 预约 subscribe -->
                    <view
                        class="item"
                        v-for="(item, index) in subscribeList"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                        <view
                            class="type-txt"
                            :class="{ 'type-txt-s': tabIndex == item.id }"
                            >{{ item.title }}</view
                        >
                    </view>
                    <!-- end -->
                    
                    <!-- 产品 -->
                    <view
                        class="item"
                        v-for="(item, index) in tabBarList"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                        <view
                            class="type-txt"
                            :class="{ 'type-txt-s': tabIndex == item.id }"
                            >{{ item.title }}</view
                        >
                    </view>

                    <!-- 采购 -->
                    <view
                        class="item"
                        v-for="(item, index) in tabBarPuschList"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                        <view
                            class="type-txt"
                            :class="{ 'type-txt-s': tabIndex == item.id }"
                            >{{ item.title }}</view
                        >
                    </view>

                    <!-- 预约 -->
                    <view
                        class="item"
                        v-for="(item, index) in tabBarAboutList"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                        <view
                            class="type-txt"
                            :class="{ 'type-txt-s': tabIndex == item.id }"
                            >{{ item.title }}</view
                        >
                    </view>

                    <!-- 互动 -->
                    <view
                        class="item"
                        v-for="(item, index) in tabBarInteractionList"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                        <view
                            class="type-txt"
                            :class="{ 'type-txt-s': tabIndex == item.id }"
                            >{{ item.title }}</view
                        >
                    </view>
                    <!-- 财务 -->
                    <view
                        class="item"
                        v-for="(item, index) in financeList"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                        <view
                            class="type-txt"
                            :class="{ 'type-txt-s': tabIndex == item.id }"
                            >{{ item.title }}</view
                        >
                    </view>
                    <!-- 新营销 -->
                    <!-- <view
                        class="item"
                        v-for="(item, index) in tabMarketingList"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                        <view
                            class="type-txt"
                            :class="{ 'type-txt-s': tabIndex == item.id }"
                            >{{ item.title }}</view
                        >
                    </view> -->
                    
                    <!-- 同城商圈 -->
                    <!-- <view
                        class="item"
                        v-for="(item, index) in tabBarLocalbusiness"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                        <view
                            class="type-txt"
                            :class="{ 'type-txt-s': tabIndex == item.id }"
                            >{{ item.title }}</view
                        >
                    </view> -->
                    <!-- 报表 -->
                    <view
                        class="item"
                        v-for="(item, index) in tabBarReportList"
                        :key="item.id"
                        @click="goPath(item)"
                        :class="tabIndex == item.id ? 'active' : ''"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                        <view
                            class="type-txt"
                            :class="{ 'type-txt-s': tabIndex == item.id }"
                            >{{ item.title }}</view
                        >
                    </view>

                    <!-- 营销 -->
                    <!-- <view class="type-txt type-txt-t10" v-if="marketingLimit">{{
                        marketingTxt
                    }}</view>
                    <view
                        class="item"
                        v-for="(item, index) in tabMarketingList"
                        :key="item.id"
                        @click="goPath(item)"
                        v-if="item.access"
                    >
                        <view class="i-icon">
                            <image
                                :src="
                                    tabIndex == item.id
                                        ? item.iconOnPath
                                        : item.iconPath
                                "
                            ></image>
                        </view>
                    </view> -->
                </div>
            </view>
            <!-- 设置 -->
            <view class="tabber-set">
                <view
                    class="item"
                    v-for="(item, index) in tabBarBtmList"
                    @mouseover="onMouseover($event, item)"
                    @mouseout="onMouseOut($event, item)"
                    :key="index"
                    @click="openSetWin(item)"
                >
                    <view class="i-icon">
                        <image :src="item.iconPath"></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="c-list" v-if="tabIndex">
            <view class="tit">{{ sTitleTxt }}</view>
            <view
                class="item"
                v-for="(item, index) in secondList"
                :key="index"
                v-if="item.access"
            >
                <view
                    class="i-tit"
                    :class="{ 'i-tit-act': curSecondId == item.id }"
                    @click="clickSecond(item)"
                    >{{ item.title }}</view
                >
                <view
                    class="item-s"
                    :class="{ 'item-s-act': curThirdId == items.id }"
                    v-for="(items, idx) in item.list"
                    :key="idx"
                    @click="clickTirthd(item, items)"
                >
                    <view>{{ items.title }}</view>
                </view>
            </view>
        </view>
        <tipTxt ref="tipTxt"></tipTxt>
        <view class="arrow-box" v-if="showArrowBtn && tabIndex">
            <view v-if="expander">
                <view class="a-b-com a-b-r" @click="expand()">
                    <text class="icon-font arrow">&#xe604;</text>
                </view>
            </view>
            <view v-else>
                <view
                    class="a-b-com a-b-l"
                    @click="expand()"
                    :style="'opacity: ' + lOpactiy + ';'"
                    @mouseover="onBarMouseOver"
                >
                    <text class="icon-font arrow">&#xe600;</text>
                </view>
            </view>
        </view>
        <sysMenu ref="sysMenu" @showTabnar="showTabnar"></sysMenu>
    </view>
</template>

<script>
import staticConst from "@/js/const/StaticConst.js";
import DEFAULT_IMG from "@/static/images/Uimg.png";
import goPage from "@/js/GoPage.js";
import localStore from "@/js/LocalStore.js";

import accessCtrl from "@/js/limit/AccessCtrl.js";
import lang from "@/js/conf/Lang.js";

import tipTxt from "@/components/comm/TipTxt.vue";

import sysMenu from "@/components/comm/SysMenuNew.vue";

import config from "@/js/conf/Config.js";

import { mapGetters } from "vuex";

export default {
    computed: {
        ...mapGetters(["hasLogin", "isExpand", "tabBarIds"]),
    },
    components: {
        tipTxt,
        sysMenu,
    },
    data() {
        return {
            tabIndex: staticConst.ORDER_XS,
            tabBarBtmList: [
                {
                    type: "sz",
                    id: 1,
                    title: "设置",
                    icon: "icon-shezhi",
                    iconOnPath: "/static/images/menuOn05.png",
                    iconPath: "/static/images/menu05.png",
                    path: "/pages/index/index",
                },
            ],
            defaultImg: DEFAULT_IMG,
            tabBarList: [],
            info: {},
            headImgUrl: "",
            setTout: false,
            saleTxt: lang.saleTxt,
            purchcaseTxt: lang.purchcaseTxt,
            aboutTxt: lang.aboutSTxt,
            marketingTxt: lang.marketingTxt,
            tabBarPuschList: [],
            purchLimit: false,
            aboutLimit: false,
            marketingLimit: false,
            repLimit: false,
            repTxt: lang.repTxt,
            tabBarReportList: [],
            tabBarAboutList: [],
            tabMarketingList: [],
            tabBarInteractionList: [],
            tabBarLocalbusiness: [],
            financeList: [], // 财务
            sTitleTxt: "",
            secondList: [],
            curSecondId: -1,
            curThirdId: -1,

            showArrowBtn: false,
            expander: true,
            lOpactiy: 0,
            urlData: {}, //url的参数
            locaTabBarIds: {},

            // 新侧边栏
            vipList: [], // 会员
            subscribeList: [], //预约
        };
    },

    onLoad() {},

    async mounted() {
        this.initData();
        uni.$on("reset_tabbar_i", (data) => {
            this.resetDataIndex(data);
        });

        uni.$on("reset_tabbar_data", () => {
            this.resetData();
        });

        uni.$on("write_bill", (data) => {
            this.bill(data);
        });

        uni.$on("write_project_bill", () => {
            this.projectBill();
        });

        uni.$on("project_customer", (data) => {
            this.projectCustomer(data);
        });
    },

    created() {
        this.urlData = this.$geturl();
        // 初始化调用一次
    },
    methods: {
        async initData() {
            this.tabIndex = staticConst.ORDER_XS;
            this.locaTabBarIds = localStore.getTabBarIds();
            this.loadUinfoData();
            this.purchLimit = await accessCtrl.getPurchLimit();
            this.repLimit = await accessCtrl.getLimitReprot();
            this.aboutLimit = await accessCtrl.getAboutLimit();
            this.marketingLimit = await accessCtrl.getMarketingLimit();
            this.expander = this.isExpand;
            this.setTabSollFun();
        },
        resetDataIndex(data) {
            console.log("123123", data);
            this.curSecondId = data.box_index;
            this.curThirdId = data.index;
        },
        showTabnar() {
            this.tabIndex = "";
            this.curSecondId = "";
            let data = {};
            data.tabIndex = "9999";
            data.curSecondId = "9999";
            data.curThirdId = "9999";
            this.$store.commit("setTabBarIds", data);
            uni.setLeftWindowStyle({ width: "72px" });
        },
        resetData() {
            this.initData();
            let data = {};
            data.tabIndex = this.tabIndex = staticConst.ORDER_XS;
            data.curSecondId = this.curSecondId = -1;
            data.curThirdId = this.curThirdId = -1;
            uni.setLeftWindowStyle({ display: "block", width: "240px" }); //设置左边导航宽度
            this.showArrowBtn = false;
            this.expander = true;
            this.$store.commit("setIsExpand", this.expander);
            this.init();
        },

        init() {
            let data = {};
            if (this.tabBarIds) {
                this.tabIndex = this.tabBarIds.tabIndex;
                if (this.tabIndex == 1) this.tabIndex = staticConst.ORDER_XS;
                this.curSecondId = this.tabBarIds.curSecondId;
                this.curThirdId = this.tabBarIds.curThirdId;
                if (this.locaTabBarIds.tabIndex == 9999) return;
                uni.setLeftWindowStyle({ width: "240px" }); //设置左边导航宽度
                
                // this.tabIndex = "CW" // laizhe 加的 测试用
                if (this.tabIndex == staticConst.CW) {
                    // 财务
                    this.sTitleTxt = this.financeList[0].title;
                    this.secondList = this.financeList[0].list;
                } else if (this.tabIndex == staticConst.YX_PT) {
                    // 营销
                    this.sTitleTxt = this.tabMarketingList[0].title;
                    this.secondList = this.tabMarketingList[0].list;
                } else if (this.tabIndex == staticConst.ORDER_XS) {
                    //销售
                    this.sTitleTxt = this.tabBarList[0].title;
                    this.secondList = this.tabBarList[0].list;
                    this.curSecondId = this.tabBarList[0].list[0].id;
                    this.curThirdId = -1;
                } else if (this.tabIndex == staticConst.ORDER_CG) {
                    //采购
                    this.sTitleTxt = this.tabBarPuschList[0].title;
                    this.secondList = this.tabBarPuschList[0].list;
                } else if (this.tabIndex == staticConst.YY_ADD_GOODS) {
                    //预约
                    this.sTitleTxt = this.tabBarAboutList[0].title;
                    this.secondList = this.tabBarAboutList[0].list;
                } else if (this.tabIndex == staticConst.HD_TAB) {
                    //互动
                    this.sTitleTxt = this.tabBarInteractionList[0].title;
                    this.secondList = this.tabBarInteractionList[0].list;
                } else if (this.tabIndex == staticConst.TCSQ_TAB) {
                    // 同城商圈
                    this.sTitleTxt = this.tabBarLocalbusiness[0].title;
                    this.secondList = this.tabBarLocalbusiness[0].list;
                    if (this.urlData.tab == 1) {
                        this.curThirdId = staticConst.TCSQ_BB_XX;
                    } else {
                        this.curThirdId = staticConst.TCSQ_BB_TJ;
                    }
                } else if (this.tabIndex == staticConst.REP_ALL) {
                    //报表
                    this.sTitleTxt = this.tabBarReportList[0].title;
                    this.secondList = this.tabBarReportList[0].list;
                } else if (this.tabIndex == staticConst.MD_KH) {
                    // 新会员
                    this.sTitleTxt = this.vipList[0].title;
                    this.secondList = this.vipList[0].list;
                    
                    
                } else if (this.tabIndex = staticConst.YY_YY) {
                    // 新预约
                    this.sTitleTxt = this.subscribeList[0].title;
                    this.secondList = this.subscribeList[0].list;
                }
                this.showArrowBtn = true;
                this.expander = true;
                this.$store.commit("setIsExpand", this.expander);
            }
            this.setLocalStore();
        },

        setLocalStore() {
            let data = {};
            data.tabIndex = this.tabIndex;
            data.curSecondId = this.curSecondId;
            data.curThirdId = this.curThirdId;
            this.$store.commit("setTabBarIds", data);
        },

        onBarMouseOver() {
            if (!this.showArrowBtn) return;
            if (this.expander) return;
            this.lOpactiy = 1;
        },

        onBarMoueOut() {
            if (!this.showArrowBtn) return;
            if (this.expander) return;
            this.lOpactiy = 0;
        },

        /****展开/收缩****/
        expand() {
            this.expander = !this.expander;
            if (!this.expander) {
                uni.setLeftWindowStyle({ width: "72px" }); //设置左边导航宽度
                this.lOpactiy = 0;
            } else {
                uni.setLeftWindowStyle({ width: "240px" }); //设置左边导航宽度
            }
            this.$store.commit("setIsExpand", this.expander);
        },

        setTabSollFun() {
            const arr = [8, 9, 10, 17, 19, 20];
            if (arr.indexOf(this.tabIndex) > -1) {
                setTimeout(() => {
                    document.querySelectorAll(
                        "#box-type-box"
                    )[0].scrollTop = 220;
                }, 300);
            }
        },

        actHandler(id) {
            let len = this.tabBarList.length;
            let item = null;
            for (let i = 0; i < len; i++) {
                let temp = this.tabBarList[i];
                if (temp.id == id) {
                    item = temp;
                    break;
                }
            }
            if (item) this.goPath(item);
        },

        /***采购***/
        actHandler1(id) {
            let len = this.tabBarPuschList.length;
            let item = null;
            for (let i = 0; i < len; i++) {
                let temp = this.tabBarPuschList[i];
                if (temp.id == id) {
                    item = temp;
                    break;
                }
            }
            if (item) this.goPath(item);
        },

        onImgError() {
            this.headImgUrl = this.defaultImg;
        },

        onMouseover(event, item) {
            let data = {};
            data.title = item.title;
            data.top = event.pageY + 20;
            if (item.type == "sz") {
                data.top = event.pageY - 40;
            }
            if (data.title.length == 2) {
                data.left = 16;
                data.width = 30;
            } else if (data.title.length == 3) {
                data.left = 12;
                data.width = 37;
            } else if (data.title.length == 4) {
                data.left = 6;
                data.width = 50;
            }
            data.display = "";
            this.$refs.tipTxt.showTip(data);
        },

        onMouseOut(item) {
            let data = {};
            data.display = "none";
            this.$refs.tipTxt.showTip(data);
        },

        async loadUinfoData() {
            this.info = await localStore.getUserInfo();
            if (this.info && this.info.avatar)
                this.headImgUrl = this.info.avatar;
            else this.headImgUrl = this.defaultImg;

            
            // this.vipList = [
            //     {
            //         id: staticConst.MD_KH,
            //         title: lang.memberTxt, //"vip",
            //         iconOnPath: "/static/images/menuOn01.png",
            //         iconPath: "/static/images/menu01.png",
            //         path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
            //         access:
            //             (await accessCtrl.getSaleLimit()) &&
            //             (await accessCtrl.getGoodsLimit()),
            //         list: [
            //             {
            //                 id: staticConst.MD_KH,
            //                 title: lang.customerTxt.titleTxt, //"客户",
            //                 path: "/pages/customer/index_v2",
            //                 access: await accessCtrl.getLimitSeeCustomer(),
            //             },
            //         ]
            //     }
            // ];

            // this.subscribeList = [
            //     {
            //         id: staticConst.YY_YY,
            //         title: "预约", //预约
            //         iconOnPath: "/static/images/home_appointment_appoint_s.png",
            //         iconPath: "/static/images/home_appointment_appoint_n.png",
            //         path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
            //         access: await accessCtrl.getyyBillLimit(),
            //         list: [
            //             {
            //                 id: staticConst.YY_YY,
            //                 title: "预约", //预约
            //                 path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
            //                 access: await accessCtrl.getyyBillLimit(),
            //                 list: [
            //                     {
            //                         id: staticConst.YY_YY_GL,
            //                         title: "预约概览",
            //                         path: "/pages/appointOverview/index",
            //                     },
            //                     {
            //                         id: staticConst.YY_YY_JL,
            //                         title: "预约记录",
            //                         path: "/pages/appointment/index",
            //                     },
            //                     {
            //                         id: staticConst.YY_YY_KHKD,
            //                         title: "客户开单",
            //                         path: "/pages/appointmentBilling/index",
            //                     },
            //                     {
            //                         id: staticConst.YY_YY_KHYY,
            //                         title: "客户预约",
            //                         path: "/pages/customerAppoint/index",
            //                     },
            //                     {
            //                         id: staticConst.YY_YY_YYPB,
            //                         title: "预约排班",
            //                         path: "/pages/appointMake/index",
            //                     },
            //                 ],
            //             },
            //         ]
            //     }
            // ];
            
            
            
            
            this.tabBarList = [
                {
                    id: staticConst.ORDER_XS,
                    title: lang.saleTxt, //"产品",
                    iconOnPath: "/static/images/menuOn01.png",
                    iconPath: "/static/images/menu01.png",
                    path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                    access:
                        (await accessCtrl.getSaleLimit()) &&
                        (await accessCtrl.getGoodsLimit()),
                    list: [
                        {
                            id: staticConst.MD_GD,
                            title: lang.goodsTxt.titleTxt, //"产品",
                            path: "/pages/goods/index",
                            access:
                                (await accessCtrl.getSaleLimit()) &&
                                (await accessCtrl.getGoodsLimit()),
                        },

                        {
                            id: staticConst.MD_KH,
                            title: lang.customerTxt.titleTxt, //"客户",
                            path: "/pages/customer/index",
                            access: await accessCtrl.getLimitSeeCustomer(),
                        },
                        {
                            type: "xs",
                            id: staticConst.MD_KD,
                            title: lang.receiptTxt.titleTxt,
                            path: "/pages/receipt/index",
                            access:
                                (await accessCtrl.getSaleLimit()) &&
                                (await accessCtrl.getBillLimit()),
                        },
                        {
                            id: staticConst.MD_DJ,
                            title: lang.billTxt.titleTxt,
                            path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                            access: await accessCtrl.getSaleLimit(),
                            list: [
                                {
                                    id: staticConst.MD_DJ_YD, //: 401,云店单
                                    title: "云店单",
                                    path: "/pages/saleBills/index?tab=1",
                                },
                                {
                                    id: staticConst.MD_DJ_XS, //: 402, //确认单
                                    title: "销售单",
                                    path: "/pages/saleBills/index?tab=2",
                                },
                                {
                                    id: staticConst.MD_DJ_TH, //: 403, //草稿单
                                    title: "退货单",
                                    path: "/pages/saleBills/index?tab=20",
                                },
                                {
                                    id: staticConst.MD_DJ_CG, //: 404, //已作废
                                    title: "草稿单",
                                    path: "/pages/saleBills/index?tab=21",
                                },
                                {
                                    id: staticConst.MD_DJ_ZF, //: 405, //已作废
                                    title: "已作废",
                                    path: "/pages/saleBills/index?tab=22",
                                },
                            ],
                        },
                    ],
                },
            ];

            this.tabBarPuschList = [
                {
                    id: staticConst.ORDER_CG,
                    title: lang.purchcaseTxt, //"库存",
                    iconOnPath: "/static/images/c02On.png",
                    iconPath: "/static/images/c02.png",
                    path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                    access: await accessCtrl.getPurchViewQtyEditLimit(),
                    list: [
                        {
                            id: staticConst.CG_KC,
                            title: lang.stockTxt.titleTxt, //"库存",
                            path: "/pages/stock/index",
                            access: await accessCtrl.getPurchViewQtyEditLimit(),
                        },

                        {
                            id: staticConst.CG_GYS,
                            title: lang.supplierTxt.titleTxt, //"供应商",
                            path: "/pages/supplier/index",
                            access: await accessCtrl.getPurchViewSupplierLimit(),
                        },

                        {
                            id: staticConst.CG_KD,
                            title: lang.purchase.titleTxt, //"采购开单",
                            path: "/pages/purchase/index",
                            access:
                                (await accessCtrl.getPurchLimit()) &&
                                (await accessCtrl.getPurchWriteBillLimit()),
                        },

                        {
                            id: staticConst.CG_DJ, //采购单据
                            title: lang.billTxt.titleTxt,
                            path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                            access: await accessCtrl.getPurchLimit(),
                            list: [
                                {
                                    id: staticConst.CG_DJ_CG, //: 601, //采购单据
                                    title: "采购单",
                                    path: "/pages/purchBill/index?tab=2",
                                },
                                {
                                    id: staticConst.CG_DJ_TH, //: 602, //退货单据
                                    title: "退货单",
                                    path: "/pages/purchBill/index?tab=20",
                                },
                                {
                                    id: staticConst.CG_DJ_CG_F, //: 603, //草稿单据
                                    title: "草稿单",
                                    path: "/pages/purchBill/index?tab=21",
                                },
                                {
                                    id: staticConst.CG_DJ_ZF, //: 604, //作废单据
                                    title: "已作废",
                                    path: "/pages/purchBill/index?tab=22",
                                },
                            ],
                        },
                    ],
                },
            ];

            this.tabBarAboutList = [
                {
                    id: staticConst.YY_ADD_GOODS,
                    title: "预约", //预约
                    iconOnPath: "/static/images/home_appointment_appoint_s.png",
                    iconPath: "/static/images/home_appointment_appoint_n.png",
                    path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                    access: await accessCtrl.getyyBillLimit(),
                    list: [
                        {
                            id: staticConst.YY_XM,
                            title: "服务", //"服务",
                            path: "/pages/project/index",
                            access: await accessCtrl.getAboutLimit(),
                        },
                        {
                            id: staticConst.YY_GK,
                            title: "顾客", //"顾客",
                            path: "/pages/projectCustomers/index",
                            access: await accessCtrl.getViewOtherCustomerLimit(),
                        },
                        {
                            id: staticConst.YY_YY,
                            title: "预约", //预约
                            path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                            access: await accessCtrl.getyyBillLimit(),
                            list: [
                                {
                                    id: staticConst.YY_YY_GL,
                                    title: "预约概览",
                                    path: "/pages/appointOverview/index",
                                },
                                {
                                    id: staticConst.YY_YY_JL,
                                    title: "预约记录",
                                    path: "/pages/appointment/index",
                                },
                                {
                                    id: staticConst.YY_YY_KHKD,
                                    title: "客户开单",
                                    path: "/pages/appointmentBilling/index",
                                },
                                {
                                    id: staticConst.YY_YY_KHYY,
                                    title: "客户预约",
                                    path: "/pages/customerAppoint/index",
                                },
                                {
                                    id: staticConst.YY_YY_YYPB,
                                    title: "预约排班",
                                    path: "/pages/appointMake/index",
                                },
                            ],
                        },

                        {
                            id: staticConst.YY_DJ,
                            title: "单据", //单据
                            path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                            access: await accessCtrl.getViewOtherSaleLimit(),
                            list: [
                                {
                                    id: staticConst.YY_DJ_YD, //: 1601,云店单
                                    title: "云店单",
                                    path: "/pages/projectOrder/index?tab=1",
                                },
                                {
                                    id: staticConst.YY_DJ_QR, //: 1602, //确认单
                                    title: "确认单",
                                    path: "/pages/projectOrder/index?tab=2",
                                },
                                {
                                    id: staticConst.YY_DJ_CG, //: 1603, //草稿单
                                    title: "草稿单",
                                    path: "/pages/projectOrder/index?tab=21",
                                },
                                {
                                    id: staticConst.YY_DJ_ZF, //: 1604, //已作废
                                    title: "已作废",
                                    path: "/pages/projectOrder/index?tab=22",
                                },
                            ],
                        },
                    ],
                },
            ];
            this.tabBarInteractionList = [
                {
                    id: staticConst.HD_TAB,
                    title: "互动",
                    iconOnPath: "/static/images/interact_01_act.png",
                    iconPath: "/static/images/interact_01.png",
                    path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                    // access: true, //await accessCtrl.getLimitInterActive(),
                    access: await accessCtrl.getLimitInterActive(),
                    list: [
                        {
                            id: staticConst.HD_HDZX,
                            title: "活动中心",
                            path: "",
                            access: true,
                        },
                        {
                            id: staticConst.HD_GLZX,
                            title: "管理中心",
                            path: "",
                            access: true,
                            list: [
                                {
                                    id: staticConst.HD_WDHD,
                                    title: "我的活动",
                                    path: "/pages/interactiveOrder/my-activities",
                                },
                                {
                                    id: staticConst.HD_HXGL,
                                    title: "核销管理",
                                    path: "/pages/interactiveOrder/order-write",
                                },
                            ],
                        },
                    ],
                },
            ];

            this.financeList = [
                {
                    id: staticConst.CW,
                    title: "财务",
                    iconOnPath: "/static/images/menuOn08.png",
                    iconPath: "/static/images/menu08.png",
                    path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                    // access: true,
                    access: await accessCtrl.getLimitFinanceAccount(),
                    list: [
                        {
                            id: staticConst.CW_SK,
                            title: "收款",
                            path: "/pages/finance/collections",
                            // access: true,
                            access: await accessCtrl.getLimitFinanceCollerction(),
                        },
                        {
                            id: staticConst.CW_FK,
                            title: "付款",
                            path: "/pages/finance/payment",
                            // access: true,
                            access: await accessCtrl.getLimitFinanceCollerction(),
                        },
                    ]
                }
            ]
            
            this.tabMarketingList = [
            {
                    id: staticConst.YX_PT,
                    title: "营销",
                    iconOnPath: "/static/images/menuOn08.png",
                    iconPath: "/static/images/menu08.png",
                    path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                    // access: true,
                    access: await accessCtrl.getLimitFinanceAccount(),
                    list: [
                        {
                            id: staticConst.YX_PT,
                            title: "活动",
                            path: "",
                            // access: true,
                            access: await accessCtrl.getSgortDoughLimit(),
                            list: [ {
                                id: staticConst.YX_PT,
                                title: "拼团优惠",
                                path: "/pages/marketing-dough/index",
                                // access: true,
                                access: await accessCtrl.getSgortDoughLimit(),
                            },{
                                id: 23333,
                                title: "限时秒杀",
                                path: "/pages/marketingMenu/limited",
                                access: true,
                                // access: await accessCtrl.getSgortDoughLimit(),
                            },]
                            
                        },
                        {
                            id: 2444,
                            title: "推广",
                            path: "",
                            // access: true,
                            access: 2444,
                            list: [ {
                                id: 2444,
                                title: "会员签到",
                                path: "/pages/signIn/index",
                                // access: true,
                                access: await accessCtrl.getSgortDoughLimit(),
                            }]
                            
                        },
                    ]
                }
                // {
                //     id: staticConst.YX_PT,
                //     title: "拼团优惠", //拼团优惠
                //     iconOnPath: "/static/images/home_appointment_project_s.png",
                //     iconPath: "/static/images/home_appointment_project_n.png",
                //     path: "/pages/marketing-dough/index",
                //     access: await accessCtrl.getSgortDoughLimit(),
                // },
            ];

            this.tabBarLocalbusiness = [
                {
                    id: staticConst.TCSQ_TAB,
                    title: "同城商圈",
                    iconOnPath: "/static/images/interact_01_act.png",
                    iconPath: "/static/images/interact_01.png",
                    path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                    access: true,
                    list: [
                        {
                            id: staticConst.TCSQ_BB,
                            title: "报表",
                            path: "",
                            access: true,
                            list: [
                                {
                                    id: staticConst.TCSQ_BB_XX,
                                    title: "销售",
                                    path: "/pages/businessDistrict/saleReport?tab=1",
                                },
                                {
                                    id: staticConst.TCSQ_BB_TJ,
                                    title: "统计",
                                    path: "/pages/businessDistrict/saleReport?tab=2",
                                },
                            ],
                        },
                        // {
                        //     id: staticConst.HD_GLZX,
                        //     title: "管理中心",
                        //     path: "",
                        //     access: true,
                        //     list: [
                        //         {
                        //             id: staticConst.HD_WDHD,
                        //             title: "我的活动",
                        //             path: "/pages/interactiveOrder/my-activities",
                        //         },
                        //         {
                        //             id: staticConst.HD_HXGL,
                        //             title: "核销管理",
                        //             path: "/pages/interactiveOrder/order-write",
                        //         },
                        //     ],
                        // },
                    ],
                },
            ];


            this.tabBarReportList = [
                {
                    id: staticConst.REP_ALL,
                    title: lang.repTxt, //"销售报表",
                    iconOnPath: "/static/images/sale_icon_active1.png",
                    iconPath: "/static/images/sale_icon1.png",
                    path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                    access:
                        (await accessCtrl.getLimitReprot()) &&
                        (await accessCtrl.getLimitSaleReport()),
                    list: [
                        {
                            id: staticConst.REP_XS,
                            title: lang.report.repSaleTxt, //"销售报表",
                            path: "/pages/report/saleReport",
                            access:
                                (await accessCtrl.getLimitReprot()) &&
                                (await accessCtrl.getLimitSaleReport()),
                        },

                        {
                            id: staticConst.REP_CG, //采购报表
                            title: lang.report.repPurchTxt,
                            path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                            access:
                                (await accessCtrl.getLimitReprot()) &&
                                (await accessCtrl.getLimitPurchReport()),
                            list: [
                                {
                                    id: staticConst.REP_CG_CG, //: 901, //采购
                                    title: "采购",
                                    path: "/pages/report/purchaseReport?tab=1",
                                },
                                {
                                    id: staticConst.REP_CG_CK, //: 902, //仓库
                                    title: "仓库",
                                    path: "/pages/report/purchaseReport?tab=2",
                                },
                                {
                                    id: staticConst.REP_CG_CK_F, //: 903, //出库
                                    title: "出库",
                                    path: "/pages/report/purchaseReport?tab=3",
                                },
                                {
                                    id: staticConst.REP_CG_RK, //: 904, //人库
                                    title: "入库",
                                    path: "/pages/report/purchaseReport?tab=4",
                                },
                            ],
                        },

                        {
                            id: staticConst.REP_YY,
                            title: lang.report.repYYTxt, //预约
                            path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                            access:(await accessCtrl.getLimitReprot()) &&
                                (await accessCtrl.getLimitSubscribeReprot()),
                            list: [
                                {
                                    id: staticConst.REP_YY_XM, //: 1701, //服务
                                    title: "服务",
                                    path: "/pages/report/appointment?tab=1",
                                },
                                {
                                    id: staticConst.REP_YY_YY, //: 1702, //预约
                                    title: "预约",
                                    path: "/pages/report/appointment?tab=2",
                                },
                            ],
                        },

                        {
                            id: staticConst.REP_TJ, //统计报表
                            title: lang.report.repStockTxt,
                            path: "", //有子菜单这个路径不用填写，会去找下级子菜单，填写了就不会找下级子菜单
                            access:
                                (await accessCtrl.getLimitReprot()) &&
                                (await accessCtrl.getLimitStockReport()),
                            list: [
                                {
                                    id: staticConst.REP_TJ_MD, //: 1001, //统计门店报表
                                    title: "门店",
                                    path: "/pages/report/statisticalReport?tab=1",
                                },
                                {
                                    id: staticConst.REP_TJ_SP, //: 1002, //统计产品报表
                                    title: "产品",
                                    path: "/pages/report/statisticalReport?tab=2",
                                },
                                {
                                    id: staticConst.REP_TJ_XM, //: 1003, //统计服务报表
                                    title: "服务",
                                    path: "/pages/report/statisticalReport?tab=3",
                                },
                                {
                                    id: staticConst.REP_TJ_YY, //: 1004, //统计预约报表
                                    title: "预约",
                                    path: "/pages/report/statisticalReport?tab=4",
                                },
                                {
                                    id: staticConst.REP_TJ_KH, //: 1005, //统计客户报表
                                    title: "客户",
                                    path: "/pages/report/statisticalReport?tab=5",
                                },
                                {
                                    id: staticConst.REP_TJ_CY, //: 1006, //统计成员报表
                                    title: "成员",
                                    path: "/pages/report/statisticalReport?tab=6",
                                },
                            ],
                        },
                    ],
                },
            ];
            this.getactivityCatFun();
        },
        // 获取活动导航列表
        async getactivityCatFun() {
            let url = config.HD_TOOL_CAT_LS;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1 && res.data.cat_ls) {
                res.data.cat_ls.map((v) => {
                    if (v.id == 1) {
                        //商业促销
                        v.path = `/pages/interactiveActivity/business-promotion?cat_id=${v.id}`;
                    }
                });
                this.tabBarInteractionList[0].list.map((v) => {
                    if (v.id == staticConst.HD_HDZX) {
                        v.list = res.data.cat_ls;
                    }
                });
            }
            this.init();
        },

        /****产品开单，供应商开单****/
        bill(type) {
            let item = {};
            if (type == 1) {
                item = this.tabBarList[0].list[2];
            } else {
                item = this.tabBarPuschList[0].list[2];
            }
            this.clickSecond(item);
        },

        /****服务开单*****/
        projectBill() {
            this.tabIndex = staticConst.YY_ADD_GOODS;
            this.curSecondId = staticConst.YY_YY;
            let item = this.tabBarAboutList[0].list[2];
            this.clickTirthd(item, item.list[2]);
        },

        /*****服务客户****/
        projectCustomer(name) {
            this.tabIndex = staticConst.YY_ADD_GOODS;
            this.curThirdId = -1;
            let item = this.tabBarAboutList[0].list[1];
            let temp = JSON.parse(JSON.stringify(item));
            temp.path = temp.path + "?customerName=" + name;
            this.clickSecond(temp);
        },

        /*****产品*****/
        goods() {
            let item = this.tabBarList[0];
            this.goPath(item);
        },

        goPath(item) {
            console.log(this.tabIndex, item);
            if (this.tabIndex == item.id) return;
            this.tabIndex = item.id;
            uni.setLeftWindowStyle({ width: "240px" }); //设置左边导航宽度
            this.sTitleTxt = item.title;
            this.secondList = item.list;
            this.expander = true;
            this.$store.commit("setIsExpand", this.expander);
            if (this.secondList && this.secondList.length > 0) {
                let temp = this.secondList[0];
                this.clickSecond(temp);
            }
            this.showArrowBtn = true;
            this.init();
        },

        /****点击二级导航***/
        clickSecond(item) {
            if (this.curSecondId == item.id) return;
            this.curSecondId = item.id;
            if (item.path) {
                this.curThirdId = -1;
                goPage.goNavTo(item.path);
                this.setLocalStore();
            } else {
                if (item.list && item.list.length > 0) {
                    this.clickTirthd(item, item.list[0]);
                }
            }
        },

        /****点击三级级导航***/
        clickTirthd(pItem, item) {
            this.curSecondId = pItem.id;
            if (this.curThirdId == item.id) return;
            this.curThirdId = item.id;
            goPage.goNavTo(item.path);
            this.setLocalStore();
        },
        /***打开/关闭设置菜单**/
        openSetWin(item) {
            this.$refs.sysMenu.dialogVisible = true;
            return;
            // if(this.tabIndex == staticConst.YY_ADD_GOODS) {
            // 	uni.setLeftWindowStyle({ width: "72px" }); //设置左边导航宽度
            // 	this.showArrowBtn = true;
            // 	this.expander = false;
            // 	this.$store.commit('setIsExpand',this.expander);
            // }
            //          if (item.id == 1 || item.id == staticConst.YX_YX)
            // {
            // 	// this.$emit("openSetWin", item.id);
            // 	uni.$emit("openSetWin", item.id);
            // }

            //          if (item.id == 2) this.$emit("openVip", item);
        },

        /****添加新的客户****/
        addNewCustom() {
            let item = this.tabBarList[1];
            this.goPath(item);
        },
    },
};
</script>
<style lang="scss">
.tabbar {
    height: 100vh;
    width: 239px;
    // position: fixed;
    display: flex;
    border-right: 1px solid #ececec;
    .tabbar-box {
        width: 72px;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;

        justify-content: center;
        background: #292f4c; //3388FF//$uni-color-primary;
        // background: linear-gradient(120deg , rgba(177,62,240,.8) , rgba(112,81,248,.8));
        height: 100%;
        width: 72px;
        z-index: 999;
        .tabbar-top {
            margin-top: 20px;
            .logo-img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                overflow: hidden;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .box-type {
                height: calc(100vh - 140px);
                overflow: auto;
                overflow-y: scroll;
                scrollbar-color: transparent transparent;
                scrollbar-track-color: transparent;
                -ms-scrollbar-track-color: transparent;
                &.comm-list {
                }
                .type-txt {
                    color: #6a6e82;
                    text-align: center;
                    padding-top: 0px;
                    font-size: 14px;
                    // padding-left: 3px;
                }
                .type-txt-s {
                    color: #3388ff;
                }

                .type-txt-t10 {
                    padding-top: 0px;
                }
                .item {
                    margin-top: 14px;
                    text-align: center;
                    width: 32px;
                    // height: 40px;
                    padding-left: 4px;
                    color: #fff; //rbga(255,255,255,1);
                    cursor: pointer;
                    position: relative;
                    .i-icon {
                        width: 32px;
                        height: 32px;
                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .i-icon:hover {
                        opacity: 0.8;
                    }
                }

                .active {
                    color: #3388ff;
                }

                .item:hover {
                    &.active {
                        color: #3388ff;
                    }
                    color: #3388ff;
                }
            }
        }
        .tabber-set {
            width: 100%;
            text-align: center;

            margin-bottom: 0px;
            color: #fff;
            cursor: pointer;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            .item {
                margin-top: 20px;
                text-align: center;
                width: 32px;
                height: 50px;
                padding-left: 20px;
                color: #fff; //rbga(255,255,255,1);
                cursor: pointer;
                .i-icon {
                    width: 32px;
                    height: 32px;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
                .i-icon:hover {
                    opacity: 0.8;
                }
            }
        }
    }

    .c-list {
        width: 240px;
        margin-left: 72px;
        background-color: #fff;
        .tit {
            font-size: 16px;
            font-weight: bold;
            padding: 20px 10px;
            color: #333;
        }

        .item {
            margin: 8px;
            cursor: pointer;
            color: #333;
            font-size: 14px;
            .i-tit {
                padding: 6px;
                border-radius: 6px;
            }
            .i-tit-act {
                background-color: #3388ff;
                color: #fff;
                &:hover {
                    background-color: rgba(51, 136, 255, 0.8) !important;
                    color: #fff !important;
                }
            }
            .i-tit:hover {
                background-color: #efefef;
                color: #666;
            }

            .item-s {
                margin: 6px;
                padding: 6px;
                border-radius: 6px;
            }
            .item-s:hover {
                background-color: #efefef;
                color: #666;
            }
            .item-s-act {
                color: #3388ff;
                &:hover {
                    color: #3388ff !important;
                }
            }
        }

        .item:first-child {
            margin-top: 0;
        }
    }

    .arrow-box {
        z-index: 999;
        position: absolute;
        right: 0px;
        top: calc(50% - 25px);
        .a-b-com {
            height: 50px;
            width: 12px;
            background-color: #ececec;
            cursor: pointer;
            .arrow {
                line-height: 50px;
                text-align: center;
            }
        }

        .a-b-com:hover {
            color: #fff;
            background-color: #3388ff;
        }

        .a-b-l {
            border-top-rigth-radius: 3px;
            border-bottom-rigth-radius: 3px;
        }
        .a-b-r {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }
    }
}
</style>

<style lang="scss" scoped>
.comm-list::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0);
    scrollbar-arrow-color: red;
}
</style>